<!--  -->
<template>
  <div>
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide>
            <ul>
                <li v-for="(item, index) in itemone" :key="index">
                   <img :src="item.imgUrl" alt="">
                   <span> {{item.title}}</span>
                </li>
            </ul>
        </swiper-slide>  
        <swiper-slide >
             <ul>
                <li v-for="(item, index) in itemtwo" :key="index">
                   <img :src="item.imgUrl" alt="">
                   <span> {{item.title}}</span>
                </li>
            </ul>
        </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    props:[
        "dataList",
    ],
  data(){
    return{
        dataitem:[],
        itemone:[],
        itemtwo:[],
      swiperOption: {
	    	pagination: {
	            el: '.swiper-pagination'
	        }
	    }
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  watch:{
        dataList:function(listItem){
            this.dataitem=listItem;
            var pages=[];
            this.dataitem.forEach((item,index) => {
                let idx=Math.floor(index/8);
                if(!pages[idx])pages[idx]=[];
                pages[idx].push(item);
            });
            this.itemone=pages[0]
            this.itemtwo=pages[1]
        }
    },
  mounted() {
      
  },
};
</script>
<style scoped>
    .swiper-container{
        width: 100%;
        height: 5.233333rem;
    }
    ul{
        width: 100%;
        list-style: none;
        display: flex;
        flex-wrap: wrap;

    }
    ul li{
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 0.2666rem;
    }
    ul li img{
        width: 1.3666666rem;
        height: 1.3666666rem;
    }
    ul li span{
        font-size: 0.32rem;
        color: #212121;
        margin-top: 0.13333rem;
    }
</style>